<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Flood</title>
		
		<!-- Bootstrap Library CSS CDN go here -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
		<!-- Boostrap Library JS CDN  go here -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				text-decoration:none;
				list-style: none;
				
			}
			.background{
				background-color: white;
			}
			.main{
				display: block;
				width: 1000px;
				height: 1000px;
				margin: 100px auto;
				background-color: #008080;
				border-radius: 10px;
			}
			.introduce{
				float: left;
				width: 500px;
				margin-top: 50px;
				margin-left: 100px;
			}
			
			.pic{
				float: right;
				width: 300px;
				margin-top: 250px;
				margin-right: 20px;
			}
			.pic img{
				width: 300px;
				height: 200px;
				border: 5px solid #fff
			}
			
			h2{
				font-size: 60px;
				padding-bottom: 10px;
				margin-bottom: 20px;
				border-bottom: 1px solid white;
				text-indent: 30px;
			}
			h4{
				margin-top: 30px;
				font-size: 30px;
				text-indent: 10px;
				padding-bottom: 10px;
				margin-bottom: 20px;
				border-bottom: 1px solid white;
			}
			p{
				font-size: 24px;
				text-indent: 48px;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-expand-lg navbar-light bg-secondary">
		    <div class="container-fluid">
		      <img src="" height="36">  
		    <a class="navbar-brand" href="#">DG8-08's app</a>
		      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		        <span class="navbar-toggler-icon"></span>
		      </button>
		      <div class="collapse navbar-collapse" id="navbarSupportedContent">
		        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
		          <li class="nav-item">
		            <a class="nav-link active" aria-current="page" href="index.html">Home</a>
		          </li>
		          <li class="nav-item">
		            <a class="nav-link" href="#">Link</a>
		          </li>
		          <li class="nav-item dropdown">
		            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
		              Dropdown
		            </a>
		            <ul class="dropdown-menu">
		              <li><a class="dropdown-item" href="#">Action</a></li>
		              <li><a class="dropdown-item" href="#">Another action</a></li>
		              <li><hr class="dropdown-divider"></li>
		              <li><a class="dropdown-item" href="#">Something else here</a></li>
		            </ul>
		          </li>
		          
		        </ul>
		        <form class="d-flex" role="search">
		          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
		          <button class="btn btn-outline-success" type="submit">Search</button>
		        </form>
		      </div>
		    </div>
		  </nav>
		<div class="background">
			<div>
				<div class="main">
					<div class="introduce">
						<h2>Flood</h2>
						<p>Flood is a water flow phenomenon caused by natural factors such as rainstorm, sudden melting of ice and snow, Storm surge and so on.
						<h4>Flood response measures</h4>
						<p>1. When the flood arrives, those who are unable to move in time should quickly move to nearby slopes, highlands, buildings, flood shelters, or immediately climb to high places such as roofs, high-rise buildings, large trees, and high walls for temporary shelter.</p>
						<p>2. If the flood continues to rise and the temporary shelter is difficult to protect itself, make full use of the prepared life-saving equipment to escape, or quickly find some door panels, tables and chairs, wooden beds, large pieces of foam plastic and other floating materials to tie into a raft for escape.</p>
					</div>
					<div class="pic">
						<img src="img/flood_flood-965092_1280.jpg" >
					</div>
				</div>
			</div>
		</div>
		
		<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
		    <p class="col-md-4 mb-0 text-body-secondary">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&copy; 2023 DG8_08</p>
		
		   
		
		    <ul class="nav col-md-4 justify-content-end">
		      <li class="nav-item"><a href="index.html" class="nav-link px-2 text-body-secondary">Home</a></li>
		      
		      <li class="nav-item"><a href="about.html" class="nav-link px-2 text-body-secondary">About</a></li>
		    </ul>
		  </footer>
	</body>
</html>